.tab-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;

  // Special styling when single item override
  &.default.single-item {
    width: 150px;
  }

  .active-tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    transition: transform 0.4s ease-in-out, width 0.4s ease-in-out;

    &.default {
      height: 2px;
      background-color: $colorVulcan;
    }
    &.discover {
      height: 3px;
      background-color: $colorViking;
    }
  }

  .tab {
    text-align: center;
    &.tab-default {
      flex: 1;
      padding: 9px 0;
      color: $colorGrey;
      opacity: 0.5;

      &.active {
        color: $colorVulcan;
        opacity: 1;
      }
    }

    &.tab-discover {
      padding: 15px 10px;
      color: $colorVulcan;

      &.active {
        color: $colorDark;
        font-weight: bold;
      }
    }
  }
}
